<template>
	<!-- 消息通知 -->
	<view class="msg">
		<scroll-view scroll-x class="plan">
			<view class="plan-item" v-for="(item, index) in planList" :key="item.value"
				:class="{ selected: planActive === index }" @click="planActive = index">
				{{ item.label }}
			</view>
		</scroll-view>
		<view class="list">
			<view class="list-item" v-for="item in 7"  @click="goDetail">
				<view class="list-item-header">
					<view class="list-item-header-left">
						<image src="/static/img/msg.png"></image>
						<view>通知消息</view>
					</view>
					<view class="list-item-header-right">2025-11-11 09:22:22</view>
					<image class="list-item-header-arrow"  src="/static/img/arrow-right.png" />

				</view>

				<view class="list-item-content">
					<view class="list-item-content-text">观看15秒广告即可解锁“立定跳远”项目成绩。</view>
					<view class="list-item-content-line"></view>
					<view class="list-item-content-row">
						<view class="list-item-content-row-cell">
							<view class="list-item-content-row-cell-value">9</view>
							<view class="list-item-content-row-cell-label">通知人数</view> 
						</view>
						<view class="list-item-content-row-cell">
							<view class="list-item-content-row-cell-value">456</view>
							<view class="list-item-content-row-cell-label">已读人数</view>
						</view>
						<view class="list-item-content-row-cell">
							<view class="list-item-content-row-cell-value">66</view>
							<view class="list-item-content-row-cell-label">未读人数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import config from '@/config';
	export default {
		data() {
			return {
				list: [1, 1, 1, 1, ],
				planList: [{
					label: '2025年第一次体测',
					value: 0
				}, {
					label: '2025年第2次体测',
					value: 1

				}, {
					label: '2025年第3次体测',
					value: 2
				}, {
					label: '2025年第4次体测',
					value: 3
				}],
				planActive: 0,
			}
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url:'/pages/msg/teacherDetail'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.msg {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.out {
		@include btnRadius();
		width: 366rpx;
	}

	.plan {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		margin: 20rpx 30rpx;
		box-sizing: border-box;
		width: 680rpx;
		scrollbar-width: none;
		/* 隐藏滚动条（部分端有效） */
	}

	.plan::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.plan-item {
		flex-shrink: 0;
		/* 防止被压缩 */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		border-radius: 28rpx;
		padding: 8rpx 24rpx;
		margin-right: 20rpx;
		background: #F3F3F3;
		color: #999;
		transition: all 0.2s ease;
	}

	.plan-item.selected {
		color: #1a1a1a;
		background: #F1FFFC;
	}


	.list {

		display: flex;
		flex-direction: column;

		&-item {
			margin-top: 10rpx;
			padding-bottom: 20rpx;
			width: 704rpx;
			// height: 208rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);

			&-content {
				// margin-left: 30rpx;
				&-line{
					margin-top: 14rpx;
					width: 100%;
					background-color: #D8D8D8;
					height: 1px;
				}
				
				&-row {
					z-index: 1;
					
					display: flex;
					margin-left: 35rpx;		
					align-items: center;
					justify-content: space-around;
					
					&-cell {
						cursor: pointer;
						display: flex;
						flex-direction: column;
						align-items: center;
						&-value {
							margin-top: 16rpx;
							font-size: 36rpx;
							font-weight: bold;
							color:#000C17 ;
						}
						&-label {
							font-size: 24rpx;
							color: #9E9E9E;
						}
						&:active {
							opacity: 0.7;
						}
					}
				}
				
				&-text {
					margin-left: 30rpx;
					margin-top: 20rpx;
					color: #666;
					font-size: 28rpx;
				}
			}

			&-header {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: #D8D8D8 solid 1rpx;
				position: relative;

				&-arrow {
					position: absolute;
					right: 10rpx;
					top: 30rpx;
					width: 28rpx;
					height: 28rpx;
				}

				&-left {
					display: flex;
					margin-left: 30rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #1A1A1A;

					}
				}

				&-right {
					margin-right: 46rpx;
					font-size: 24rpx;
					color: #1A1A1A;
				}
			}
		}
	}
</style>